<!DOCTYPE html>
<html lang="en">

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script>


    // 当页面加载完 执行
    window.onload = function () {

      let btn1 = document.querySelector("#btn1")

      btn1.onclick = function () {
        alert('使用js1 绑定的事件')
      }

      //会覆盖上一次 onclick
      btn1.onclick = function () {
        alert('使用js2 绑定的事件')
      }


      let btn2 = document.querySelector("#btn2")
      btn2.addEventListener('click', function () {
        alert('1使用addEventListener 绑定的事件')
      })
      btn2.addEventListener('click', function () {
        alert('2使用addEventListener 绑定的事件')
      })
    }

  </script>


</head>

<body>
  <button onclick="alert(11111)">使用属性绑定事件</button>
  <button id="btn1">使用js属性绑定事件</button>
  <button id="btn2">addEventListener</button>


  <input type="text" name="" id="inp">

  <div style="width: 300px;height: 300px; border:solid 0.5px grey"  id="d1">




  </div>


  <script>

    let d1  = document.querySelector("#d1");

    d1.addEventListener('mouseover',function(event){
      console.log("event",event);
      d1.style.boxShadow =" 0 0 30px black"
    })

    d1.addEventListener('mouseout',function(event){
      console.log("event",event);
       d1.style.boxShadow =""
    })

    d1.addEventListener('mousemove',function(event){
      let {x,y} = event;
      console.log("event",event,x,y);
    })


    let inp = document.querySelector("#inp")
    inp.addEventListener("keydown",function(keyEvent){
      console.log("keyEvent",keyEvent);
    })
  </script>


</body>

</html>